<template>
  <div class="music-play">
      <video ref="video" class="video" src="http://47.98.103.2:7000/myfile/来自新世界-割れたリンゴ.mp3" @timeupdate=" handler" :volume="volume"  @ended="end"/>
      <div class="left">
          <img src="http://47.98.103.2:7000/myfile/自新世界.jpg" width="80" height="70" >
      </div>
      <div class="right">
          <div class="info">
              <div class="name">来自新世界-割れたリンゴ.mp3</div>
              <div class="icon-group">
                <SvgIcon class="icon" name="shangyishou"></SvgIcon>
                <SvgIcon class="icon" v-if="isPause" name="bofang" @myClick="bofang"></SvgIcon>
                <SvgIcon class="icon" v-else name="zanting1" @myClick="pause"></SvgIcon>
                <SvgIcon class="icon" name="xiayishou"></SvgIcon>
              </div>
              
          </div>
          <div class="operate">
              <div class="progress" @mousedown="click">
                <el-slider v-model="progressVal" :show-tooltip="false" :min="0" :max="max" @change="sliderChange"></el-slider>
              </div>
              <div class="btn">
                  <div class="time">{{time}}/{{timeSize}}</div>
                  <div class="btn-group"> 
                    <div class="voice" @mouseleave="voiceLeaveHandler">
                        <SvgIcon class="voice-icon" name="yinliang" @mouseenter="voiceMouseEnter"/>
                        <el-slider
                        v-show="voiceSiderShow"
                        class="sider"
                        v-model="voice"
                        vertical
                        height="100px"
                        :min="0"
                        :max="10">
                        </el-slider>
                    </div>
                  </div>
              </div>
          </div>
      </div>
  </div>  
   
</template>

<script>
import { computed, ref } from 'vue'


function formatSeconds(value) {
    var theTime = parseInt(value);// 秒
    var theTime1 = 0;// 分
    var theTime2 = 0;// 小时
    if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
            theTime2 = parseInt(theTime1 / 60);
            theTime1 = parseInt(theTime1 % 60);
        }
    }
 
    var result = "" + parseInt(theTime);//秒
    if (10 > theTime > 0) {
        result = "0" + parseInt(theTime);//秒
    } else {
        result = "" + parseInt(theTime);//秒
    }
 
    if (10 > theTime1 > 0) {
        result = "0" + parseInt(theTime1) + ":" + result;//分，不足两位数，首位补充0，
    } else {
        result = "" + parseInt(theTime1) + ":" + result;//分
    }
    if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + ":" + result;//时
    }
    return result;
}
export default {
    name: 'MusicPlay',
    props:{
        // list: {
        //     type: Array,
        //     required: true
        // }
    },
    setup(props){
        //const {list} = props

        const video = ref(null)

        let isPause = ref(true)

        let progressVal = ref(0)

        let max = ref(0)

        let clock = ref(true)

        let time = ref('00:00')

        let timeSize =ref('00:00')

        let voice = ref(10)

        let voiceSiderShow = ref(false)

        const bofang = ()=>{
            isPause.value = false
            video.value.play()
            max.value = parseInt(video.value.duration*100/1)
            timeSize.value = formatSeconds(video.value.duration)
        }
        
        const handler = ()=>{
            if(clock.value){
                progressVal.value = parseInt(video.value.currentTime*100/1);
                time.value =  formatSeconds(progressVal.value/100)
            }
        }

        const pause = ()=>{
            isPause.value = true
            video.value.pause()
        }

        const click = ()=>{
            clock.value = false
        }
        const sliderChange = (val)=>{
            video.value.currentTime = val/100;
            progressVal.value = val;
            clock.value = true
        }

        const end = ()=>{
            isPause.value = true
        }

        const volume = computed(()=> voice.value/10)

        const voiceMouseEnter = () =>{
            voiceSiderShow.value = true
        }

        const voiceLeaveHandler = ()=>{
          voiceSiderShow.value = false
        }

        return{video,bofang,isPause,pause,progressVal,max,handler,click,sliderChange,end,time,timeSize,voice,volume,voiceSiderShow,voiceMouseEnter,voiceLeaveHandler}
       
    }

}
</script>

<style lang="scss" scoped>
.music-play{
    border: 1px solid #e9e9e9;
    background: #fff;
    display: inline-block;
    width: 420px;
    height: 70px;
    display: flex;

    .right{
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 18px 5px 0 5px;
        .info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
                font-size: 14px;
                overflow: hidden;
                width: 200px;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .icon-group{
                margin-right: 25px;
            }
            .icon{
                margin: 0 5px;
                color: #858585;
                &:hover{
                    cursor: pointer;
                    color: #333333;
                }
            }
        }
        .operate{
            display: flex;
            align-items: center;
            .progress{
                flex: 1;
            }
            .btn{
                flex: 1;
                margin-left: 10px;
                display: flex;
                align-items: center;
                .time{
                    font-size: 12px;
                    color: #a1a1a1;
                }
                .btn-group{
                    flex: 1;
                    margin-left: 10px;
                    .voice{
                        position: relative;
                        .sider{
                            position: absolute;
                            bottom: 12px;
                            left: -16px;
                            padding: 9px 5px;
                        }

                        .voice-icon{
                            color: #858585;
                            &:hover{
                                cursor: pointer;
                                color: #333333;
                            }
                        }

                    }
                }
            }
        }
       
    }
    
}
.video{
    display: none;
}
</style>

<style lang="scss">
.music-play{
    .progress{
         .el-slider__button-wrapper {
        height: 33px !important;
        width: 33px !important;
        }
        .el-slider__button {
            width: 10px !important;
            height: 10px!important;
        }
        .el-slider__runway {
            height: 3px !important;
        }
        .el-slider__bar {
            height: 3px !important;
        }
    }
   
   
    .voice{
          .el-slider.is-vertical .el-slider__button-wrapper {
                left: -16px !important;
            }
            .el-slider__button {
                width: 10px !important;
                height: 10px !important;
            }
            .el-slider.is-vertical .el-slider__bar {
                width: 4px !important;
            }
            .el-slider.is-vertical .el-slider__runway {
                width: 4px !important;
            }
    }
}



</style>